/**
 * @description  : 可拖动底部抽屉
 * @descriptionDetail : 可拖动底部抽屉
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-03 16:48:17
 */
<template>
  <movable-area class="DragDrawer" :style="{top:showHeight+'vh',zIndex:zIndex}">
    <movable-view :y="y" direction="vertical" inertia out-of-bounds :style="{height:showHeight+3+'vh'}" ref="mv" @change="$emit('change',$event)">
      <view class="bar">
        <view class="ctrl"></view>
      </view>
      <view class="content" :style="{height:showHeight-3+'vh'}">
        <slot name="content"></slot>
      </view>
    </movable-view>
  </movable-area>
</template>

<script>
export default {
  name: "DragBottomDrawer",
  props: {
    height: {
      type: Number,
      default: 50,
    },
    y: {
      type: Number,
      default: 0,
    },
    zIndex: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {

    };
  },
  computed:{
    showHeight(){
      return 100 - this.height
    },
  },
  mounted() {
    this.$emit('init', this.$refs.mv);
  },
}
</script>

<style lang="scss">
	.DragDrawer {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		pointer-events: none;

		movable-view {
			height: 73vh;
			width: 100%;
			border-radius: 30px;
			background-color: #FFFFFF;
			pointer-events: auto;

			.bar {
				display: flex;
				justify-content: center;
				width: 100%;
				margin-top: 1vh;
				margin-bottom: 1vh;

				.ctrl {
					width: 30vw;
					height: 1vh;
					background-color: #ededed;
					border-radius: 5px;
					box-shadow: 1px 1px 1px #d1d1d1
				}

			}

			.content {
				width: 90%;
				margin: 0 auto;
			}
		}
	}
</style>
